<template>
	<view>
		<scroll-view class="box" scroll-y="true" :scroll-top="top">

			<view v-for="el in arr">
				<view class="leftbox" v-if="el.flag">
					<image class="touxiang" :src="el.img"></image>
					<view class="text">
						{{el.text}}
					</view>
				</view>

				<view class="rightbox" v-else>
					<view class="text">
						{{el.text}}
					</view>
					<image class="touxiang" :src="el.img"></image>
				</view>
			</view>
		</scroll-view>

		<view class="bottombar">
			<input class="chat_input" type="text" v-model="text">
			<view class="sendbtn" @click="send">发送</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue"
	let top = ref(9999999999)
	let text = ref("1234")
	let send = () => {
		let temp = text.value
		text.value = ""

		console.log(text.value)
		let obj1 = {
			id: 1235,
			text: temp,
			img: "../../../static/user.png",
			flag: false
		}
		arr.value.push(obj1)
		nextTick(() => {
			top.value += 1
		})


		// 发送给后端
		uni.request({
			url: "http://localhost:7001/aichat",
			data: {
				text: temp
			},
			success: (res) => {
				console.log(res)
				let obj2 = {
					id: 1234,
					text: res.data.Content.toString(),
					img: "../../../static/ai.png",
					flag: true
				}
				arr.value.push(obj2)
				nextTick(() => {
					top.value += 1
				})
			}
		})


	}



	let arr = ref([{
			id: 1234,
			text: "你好",
			img: "../../../static/ai.png",
			flag: true
		},
		{
			id: 1235,
			text: "你好同学们你 你好,成都理工大学的同学们你好,成都理工学们你好,成都理大",
			img: "../../../static/user.png",
			flag: false
		},
		{
			id: 1235,
			text: "你好同学理大",
			img: "../../../static/user.png",
			flag: false
		},
		{
			id: 1234,
			text: "你好",
			img: "../../../static/ai.png",
			flag: true
		},
		{
			id: 1235,
			text: "你好同学们你 你好,成都理工大学的同学们你好,成都理工学们你好,成都理大",
			img: "../../../static/user.png",
			flag: false
		},
		{
			id: 1235,
			text: "你好同学理大",
			img: "../../../static/user.png",
			flag: false
		},
		{
			id: 1234,
			text: "你好",
			img: "../../../static/ai.png",
			flag: true
		},
		{
			id: 1235,
			text: "你好同学们你 你好,成都理工大学的同学们你好,成都理工学们你好,成都理大",
			img: "../../../static/user.png",
			flag: false
		},
		{
			id: 1235,
			text: "你好同学理大",
			img: "../../../static/user.png",
			flag: false
		},
		{
			id: 1234,
			text: "你好同学理大同学理大",
			img: "../../../static/ai.png",
			flag: true
		}
	])
</script>


<style>
	.box {
		width: 750rpx;
		height: 1150rpx;
		background-color: saddlebrown;
		background-image: url("https://img2.baidu.com/it/u=511553633,516680395&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709398800&t=a73f708e1994b06d431c5f41c24d6e82");
		background-size: 750rpx 1150rpx;
		/* padding-bottom: 20rpx; */
	}

	.leftbox {
		width: 750rpx;
		/* height: 400rpx; */
		/* background-color: salmon; */
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		margin-top: 20rpx;
	}

	.rightbox {
		width: 750rpx;
		/* height: 400rpx; */
		/* background-color: salmon; */
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		margin-top: 30rpx;
	}

	.touxiang {
		width: 70rpx;
		height: 70rpx;
		border-radius: 45rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.text {
		min-width: 120rpx;
		max-width: 520rpx;
		/* height: 200rpx; */
		/* background-color: skyblue; */
		margin-left: 5rpx;
		margin-right: 5rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 24rpx;
	}

	.leftbox .text {
		background-color: skyblue;
	}

	.rightbox .text {
		background-color: rgb(255, 241, 42);
	}

	.bottombar {
		width: 750rpx;
		height: 94rpx;
		background-color: rgb(240, 240, 240);
		border: 1rpx solid silver;
		display: flex;
		justify-content: flex-start;
		/* padding-top: 10rpx; */
	}

	.chat_input {
		width: 560rpx;
		height: 80rpx;
		background-color: white;
		margin-top: 10rpx;
		margin-left: 20rpx;
		padding-left: 10rpx;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
	}

	.sendbtn {
		width: 100rpx;
		height: 80rpx;
		background-color: rgb(218, 218, 218);
		margin-top: 10rpx;
		/* text-align: center; */
		padding-left: 30rpx;
		line-height: 90rpx;
		border-radius: 0rpx 10rpx 10rpx 0rpx;
	}
</style>